import {Card, CardContent, CardFooter, CardHeader, CardTitle} from "@/components/ui/card";
import {BASIC_INFO} from "@/lib/constants";
import FormAssembly from "@/components/form-assembly";
import {Button} from "@/components/ui/button";
import {Settings2} from "lucide-react";
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
    DialogTrigger
} from "@/components/ui/dialog";
import {Checkbox} from "@/components/ui/checkbox";

const BasicInfo = ({basicData, setBasicData}: any) => {
    // 更改信息
    const handleValueChange = (key: any, value: string) => {
        setBasicData({
            ...basicData,
            [key]: value
        })
    }

    // 信息管理显隐
    const handleInfoDisplay = (checked: boolean, key: string) => {
        setBasicData({
            ...basicData,
            orderShow: checked ?
                [...basicData?.orderShow, key]
                :
                basicData?.orderShow?.filter((item: any) => item !== key)
        })
    }

    return (
        <Card className={'border-none shadow-sm rounded-none'}>
            <CardHeader>
                <div className={'flex justify-between items-center'}>
                    <CardTitle>
                        {basicData?.title}
                    </CardTitle>
                </div>
            </CardHeader>
            <CardContent className={'grid grid-cols-2 gap-4'}>
                {basicData?.orderShow?.map((key: any) => (
                    <FormAssembly
                        value={basicData?.[key]}
                        {...BASIC_INFO[key]}
                        change={(value: any) => {
                            handleValueChange(key, value)
                        }}
                        key={key}
                    />
                ))}
            </CardContent>
            <CardFooter className={'justify-end items-center'}>
                <Dialog>
                    <DialogTrigger>
                        <Button variant={'outline'}>
                            <Settings2 size={16} className={'mr-2'}/>
                            信息管理
                        </Button>
                    </DialogTrigger>
                    <DialogContent>
                        <DialogHeader>
                            <DialogTitle>信息管理</DialogTitle>
                        </DialogHeader>
                        <div className={"grid grid-cols-2 gap-4"}>
                            <Card>
                                <CardHeader>
                                    <CardTitle>未选择</CardTitle>
                                </CardHeader>
                                <CardContent className={'space-y-4'}>
                                    {Object.keys(BASIC_INFO).map((key: any) => {
                                        if (!basicData?.orderShow?.includes(key)) {
                                            return (
                                                <div className="flex items-center justify-between">
                                                    <label
                                                        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
                                                        {BASIC_INFO[key].label}
                                                    </label>
                                                    <Checkbox
                                                        onCheckedChange={(checked: boolean) => {
                                                            handleInfoDisplay(checked, key)
                                                        }}
                                                        id={key}
                                                    />
                                                </div>
                                            )
                                        }
                                    })}
                                </CardContent>
                            </Card>
                            <Card>
                                <CardHeader>
                                    <CardTitle>已选择</CardTitle>
                                </CardHeader>
                                <CardContent className={'space-y-4'}>
                                    {basicData?.orderShow?.map((key: any) => (
                                        <div className="flex items-center justify-between">
                                            <label
                                                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
                                                {BASIC_INFO[key].label}
                                            </label>
                                            <Checkbox
                                                onCheckedChange={(checked: boolean) => {
                                                    handleInfoDisplay(checked, key)
                                                }}
                                                id={key}
                                                checked
                                                disabled={BASIC_INFO[key]?.required}
                                            />
                                        </div>
                                    ))}
                                </CardContent>
                            </Card>
                        </div>
                    </DialogContent>
                </Dialog>
            </CardFooter>
        </Card>
    )
}

export default BasicInfo;